import { Form, Input } from 'antd';
import React, { ReactNode } from 'react';

const FormItem = Form.Item;
const { Search, TextArea } = Input;

interface PropsType {
  type?: string;
  label?: string | ReactNode;
  name: string;
  initialValue?: any;
  itemLayout?: {};
  rules?: any;
  size?: string;
  placeholder?: string;
  getFieldDecorator?: any;
  addonAfter?: any;
  hasFeedback?: boolean;
  disabled?: boolean;
}
const InputItem: React.FC<PropsType> = props => {
  const {
    type,
    label,
    name,
    initialValue,
    // 不定义默认值，否则在form中定义后，form中的itemLayout不生效，此处会把form中的覆盖掉
    // 此处在form中统一处理，如果需要覆盖则在引用此组件处进行定义
    // itemLayout={
    //   labelCol: { span: 4 },
    //   wrapperCol: { span: 14 },
    // },
    itemLayout = {},
    rules,
    getFieldDecorator,
    hasFeedback,
    disabled,
    ...othersProps
  } = props;

  const domInfo = () => {
    if (type === 'search') {
      return <Search disabled={disabled} {...othersProps} />;
    }
    if (type === 'textarea') {
      return <TextArea disabled={disabled} {...othersProps} />;
    }
    return <Input disabled={disabled} {...othersProps} />;
  };

  return (
    <FormItem label={label} {...itemLayout} hasFeedback={!hasFeedback ? hasFeedback : !!rules}>
      {getFieldDecorator(name, {
        initialValue,
        rules,
      })(domInfo())}
    </FormItem>
  );
};
export default InputItem;
